<script setup>
import { computed, toRefs } from 'vue'
import {randomString} from '@/utils/util-string'

const props = defineProps({
  visible: Boolean,
  confirmLoading: Boolean,
  title: {
    type: String,
    default: ''
  },
  width: {
    type: [Number, String],
    default: 520
  }
})
const emit = defineEmits(['update:visible', 'ok'])
let show = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})
let confirmLoading = computed(() => props.confirmLoading)
let { title, width } = toRefs(props)
let boxId = 'modal-box-' + randomString(8)
const getContainer = () => {
  return document.getElementById(boxId)
}
</script>

<template>
  <div v-movable="true" :id="boxId">
    <a-modal
        v-model:visible="show"
        :title="title"
        :maskClosable="false"
        :getContainer="getContainer"
        :force-render="true"
        okText="提交"
        :width="width"
        :confirm-loading="confirmLoading"
        @cancel="show = false"
        @ok="emit('ok')">
      <slot></slot>
    </a-modal>
  </div>
</template>
